<template>
  <div class="pad-20" v-loading="fullLoading" element-loading-text="加载中">
    <!-- 截停商品信息 -->
    <el-tabs v-model="tabModel">
        <el-table :data="goodsDetailList" height="400">
            <el-table-column min-width="260px" label="商品" prop="goodsTitle">
              <template slot-scope="scope">
                <div class="flex">
                  <label v-if="scope.row.goodsImageUrl"><img :src="scope.row.goodsImageUrl" class="t-goods-pic"></label>
                  <div class="pad-l-10">
                    <div class="line-2">{{ scope.row.goodsTitle }}</div>
                    <br>
                    <div v-if="scope.row.goodsBarCode">条码：{{ scope.row.goodsBarCode }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="180px" label="规格描述" prop="skuDetail" align="center">
              <template slot-scope="scope">
                <div class="font-blue">
                  {{ scope.row.skuDetail ? scope.row.skuDetail : '无' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column width="100px" label="数量" align="center">
              <template slot-scope="scope">
                <div>商品数：{{ scope.row.goodsNum }}</div>
                <div>发货数：{{ scope.row.deliveryNum }}</div>
                <div>售后数：{{ scope.row.afterSaleGoodsNum }}</div>
                <div>截停数：{{ scope.row.stopNum }}</div>
              </template>
            </el-table-column>
            <el-table-column width="100px" label="单价" prop="goodsPrice" align="center">
              <template slot-scope="scope">
                <div>￥{{ scope.row.goodsPrice }}</div>
              </template>
            </el-table-column>
            <el-table-column width="120px" label="商品总金额" prop="goodsPayAmount" align="center">
              <template slot-scope="scope">
                <div>￥{{ scope.row.goodsPayAmount }}</div>
              </template>
            </el-table-column>
            <el-table-column width="140px" label="截停原因" align="center">
              <template slot-scope="scope">
                <div class="font-red" v-if="scope.row.stopRemark">
                  <span>{{ scope.row.stopRemark }}</span>
                </div>
                <div v-else>无</div>
              </template>
            </el-table-column>
          </el-table>
      </el-tabs>
  </div>
</template>

<script>
  import { listGoodsListByApartOrderId } from '@/api/goods/apartOrder'
  import { getDictByGroupName } from '@/api/common/common'
  import clipboard from '@/utils/clipboard'

  export default {
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      },
      // 子单编号
      apartOrderId: {
        type: String
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          const originData = this.$options.data()
          this.tabModel = originData.tabModel
          this.init()
        }
      }
    },
    data() {
      return {
        // 发货单
        sendObj: {
          apartOrderId: ''
        },
        // 数据字典
        dict: {
          sendStatus: {},
          stopFlag: {},
          orderStatus: {}
        },
        // tab model
        tabModel: 'detail',
        // 商品明细列表
        goodsDetailList: [],
        fullLoading: false
      }
    },
    created() {
      // 获取数据字典
      getDictByGroupName('ApartOrderDTO.stopFlag').then(response => {
        Object.assign(this.dict, response.data)
      })
      getDictByGroupName('ProjectOrderDTO').then(response => {
        Object.assign(this.dict, response.data)
      })
      getDictByGroupName('ProjectSendDTO').then(response => {
        Object.assign(this.dict, response.data)
      })
      this.init()
    },
    methods: {
      // 复制事件
      doCopy(text, event) {
        clipboard(text, event)
      },
      // 初始化
      init() {
        this.fullLoading = true
        listGoodsListByApartOrderId(this.apartOrderId).then(response => {
          this.fullLoading = false
          if (response.isError) return
          this.goodsDetailList = response.data
        })
      },
      // 返回事件
      doBack() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style lang="less" scoped>
  .base-info {
    width: 100%;
    line-height: 30px;
    .left {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
